<!DOCTYPE html>
<html lang="zh">
<head>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <meta name="format-detection" content="telephone=no">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>转盘抽奖</title>
    <link href="css/main.css" rel="stylesheet" type="text/css"/>
    <link href="css/swiper.min.css" rel="stylesheet" type="text/css"/>
</head>
<body id="zpcj">
    <div class="container" >
        <div class="log"><img src="tmp/logo.png" /></div>
        <div class="wrap-box">
            <div class="wrap">
                <div class="bk-01">
                    <div class="swiper-container swiper-list">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">1386****875抽中5金豆(滚动)</div>
                            <div class="swiper-slide">1386****875抽中5金豆(滚动)</div>
                            <div class="swiper-slide">1386****875抽中5金豆(滚动)</div>
                            <div class="swiper-slide">1386****875抽中5金豆(滚动)</div>
                            <div class="swiper-slide">1386****875抽中5金豆(滚动)</div>
                            <div class="swiper-slide">1386****875抽中5金豆(滚动)</div>

                        </div>
                    </div>

                </div>
                <div class="bk-02" >
                    <div class="my-jd">
                        <span>我的金豆:</span>
                        <i>595226</i>
                    </div>
                    <!--<p class="explain">5金豆抽一次</p>-->
                    <a class="btn-cz">点击充值</a>
                </div>
                <div class="bk-03 dial-bk dial-12">
                    <ul>
                        <li data-lid="a" data-text="1个金豆" data-src="images/dial/jd200_156.png" ><img src="images/dial/jd200_156.png" /></li>
                        <li data-lid="b" data-text="1个金豆" data-src="images/dial/jd175_135.png"><img src="images/dial/jd175_135.png" /></li>
                        <li data-lid="c" data-text="1个金豆" data-src="images/dial/jd175_135.png"><img src="images/dial/jd175_135.png" /></li>
                        <li data-lid="d" data-text="1个金豆" data-src="images/dial/jd175_135.png"><img src="images/dial/jd175_135.png" /></li>
                        <li data-lid="e" data-text="1个金豆" data-src="images/dial/jd175_135.png"><img src="images/dial/jd175_135.png" /></li>
                        <li data-lid="f" data-text="1个金豆" data-src="images/dial/jd175_135.png"><img src="images/dial/jd175_135.png" /></li>
                        <li data-lid="g" data-text="1个金豆" data-src="images/dial/jd175_135.png"><img src="images/dial/jd175_135.png" /></li>
                        <li data-lid="h" data-text="1个金豆" data-src="images/dial/jd175_135.png"><img src="images/dial/jd175_135.png" /></li>
                        <li data-lid="i" data-text="1个金豆" data-src="images/dial/jd175_135.png"><img src="images/dial/jd175_135.png" /></li>
                        <li data-lid="g" data-text="1个金豆0" data-src="images/dial/jd175_135.png"><img src="images/dial/jd175_135.png" /></li>
                        <li data-lid="k" data-text="1个金豆1" data-src="images/dial/jd175_135.png"><img src="images/dial/jd175_135.png" /></li>
                        <li data-lid="m" data-text="1个金豆2" data-src="images/dial/jd175_135.png"><img src="images/dial/jd175_135.png" /></li>
                    </ul>
                    <div class="btn-start">

                        <img class="qu" src="images/dial/start-qu.png" />
                        <p>开始<br/>抽奖</p>
                        <i>5金豆抽一次</i>
                        <div class="cover"></div>
                    </div>
                </div>
                <div class="bk-04">
                    <div class="hd">活动规则</div>
                    <div class="bd">
                        <p>8月5日，北京，磁浮列车在轨测试。北京磁悬浮示范线，又称北京地铁S1线，目前正在轨道测试运行。李长山摄图片来源：视觉中国</p>
                        <p>   8月5日，北京，磁浮列车在轨测试。北京磁悬浮示范线，又称北京地铁S1线，目前正在轨道测试运行。</p>
                    </div>
                </div>
            </div>
        </div>
        <audio  class="music hide" preload="metadata"  controls src="music/hdl.mp3" loop="loop"></audio>
        <div class="venue">
            <div class="hd select-venue">
                选择会场
                <div class="jan-top"><img  src="images/dial/jan-top.png" /></div>

            </div>
            <div class="bd">
                <div class="swiper-container swiper-venue">
                    <div class="swiper-wrapper">
                        <a class="swiper-slide">
                            <div class="bImg"><img src="images/dial/dial.png"></div>
                            <p>活动会场的名字</p>
                        </a>
                        <a class="swiper-slide">
                            <div class="bImg"><img src="images/dial/dial.png"></div>
                            <p>活动会场的名字</p>
                        </a>
                        <a class="swiper-slide">
                            <div class="bImg"><img src="images/dial/dial.png"></div>
                            <p>活动会场的名字</p>
                        </a>
                        <a class="swiper-slide">
                            <div class="bImg"><img src="images/dial/dial.png"></div>
                            <p>活动会场的名字</p>
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div class="venue-shade"></div>

    </div>
    <script src="js/rem.js"></script>
    <script src="js/jquery.js"></script>
    <script src="libs/layer_mobile/layer.js"></script>
    <script src="js/swiper.jquery.min.js"></script>
    <script src="js/LotteryActivity.js"></script>
    <script>
        $(function () {
            var swiperList = new Swiper('.swiper-list', {
                paginationClickable: true,
                direction: 'vertical',
                autoplay:1000,
                loop:true,
                autoplayDisableOnInteraction : false
            });
            var swiperVenue = new Swiper('.swiper-venue', {
                paginationClickable: true,
                effect: 'coverflow',
                slidesPerView : 3,
                centeredSlides: true,
                coverflow: {
                    slideShadows : false
                }
            });

            var zpLottery = new lottery({
                dom: ".dial-bk ul li",
                active: "act",
                circle: 2,
                time: 100
           })

            var $music =$(".music");
            var czHtml='<div class="cz-layer">' +
                '<h4>您的金豆不足请充值</h4>' +
                '<a class="btn-cz">去充值</a>' +
                '</div>'

            var zjHtml=function (url,text) {

                return '<div class="jp-layer">' +
                    '<h4>恭喜您获得</h4>' +
                    '<img src="'+url+'" />' +
                    '<p>'+text+'</p>' +
                    '</div>'
            }


            var arr=["a","a","c"]
            var k=0
            var $dialUl =$(".dial-bk ul")
            $(".btn-start").on("click",function () {
                var lid;
                if(k ==3){
                    layer.open({
                        shade: 'background-color: rgba(0,0,0,.3)',
                        content: czHtml
                    });
                }
                if(k == 3){
                  return
                }

                lid=arr[k++]
                $music[0].play()
                zpLottery.start(lid,function (d) {
                    console.log("结束:")
                    console.log(d)
                    $music[0].pause();
                    layer.open({
                        className:"jp-layer-box",
                        shade: 'background-color: rgba(0,0,0,.3)',
                        content: zjHtml(d.attr("data-src"),d.attr("data-text"))
                    });
                },function () {
                    $music[0].pause();
                    layer.open({
                        content: '异常'
                        ,skin: 'msg'
                        ,time: 2 //2秒后自动关闭
                    });
                })
            })
            var $venue= $(".venue")
            var $venueShade= $(".venue-shade")
            $(".select-venue ,.venue-shade").on("click",function () {
                if( $venue.hasClass("sact")){
                    $venue.removeClass("sact")
                    $venueShade.removeClass("sact")
                }else {
                    $venue.addClass("sact")
                    $venueShade.addClass("sact")
                }

            })


        })
    </script>
</body>
</html>